<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="设备的唯一ID" prop="mainid">
        <el-input
          v-model="queryParams.mainid"
          placeholder="请输入设备的唯一ID"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="流媒体服务器ID" prop="mediaserverid">
        <el-input
          v-model="queryParams.mediaserverid"
          placeholder="请输入流媒体服务器ID"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="vhost" prop="vhost">
        <el-input
          v-model="queryParams.vhost"
          placeholder="请输入vhost"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="app" prop="app">
        <el-input
          v-model="queryParams.app"
          placeholder="请输入app"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="通道名称，整个系统唯一" prop="channelname">
        <el-input
          v-model="queryParams.channelname"
          placeholder="请输入通道名称，整个系统唯一"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="部门代码" prop="departmentid">
        <el-input
          v-model="queryParams.departmentid"
          placeholder="请输入部门代码"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="部门名称" prop="departmentname">
        <el-input
          v-model="queryParams.departmentname"
          placeholder="请输入部门名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="上级部门代码" prop="pdepartmentid">
        <el-input
          v-model="queryParams.pdepartmentid"
          placeholder="请输入上级部门代码"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="上级部门名称" prop="pdepartmentname">
        <el-input
          v-model="queryParams.pdepartmentname"
          placeholder="请输入上级部门名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="设备的网络类型" prop="devicenetworktype">
        <el-select v-model="queryParams.devicenetworktype" placeholder="请选择设备的网络类型" clearable size="small">
          <el-option label="请选择字典生成" value="" />
        </el-select>
      </el-form-item>
      <el-form-item label="设备的流类型" prop="devicestreamtype">
        <el-select v-model="queryParams.devicestreamtype" placeholder="请选择设备的流类型" clearable size="small">
          <el-option label="请选择字典生成" value="" />
        </el-select>
      </el-form-item>
      <el-form-item label="使用哪种方式拉取非rtp设备的流" prop="methodbygetstream">
        <el-input
          v-model="queryParams.methodbygetstream"
          placeholder="请输入使用哪种方式拉取非rtp设备的流"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="设备类型，IPC,NVR,DVR" prop="videodevicetype">
        <el-select v-model="queryParams.videodevicetype" placeholder="请选择设备类型，IPC,NVR,DVR" clearable size="small">
          <el-option label="请选择字典生成" value="" />
        </el-select>
      </el-form-item>
      <el-form-item label="是否自动启用推拉流" prop="autovideo">
        <el-input
          v-model="queryParams.autovideo"
          placeholder="请输入是否自动启用推拉流"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="是否自动启用录制计划" prop="autorecord">
        <el-input
          v-model="queryParams.autorecord"
          placeholder="请输入是否自动启用录制计划"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="录制时长" prop="recordsecs">
        <el-input
          v-model="queryParams.recordsecs"
          placeholder="请输入录制时长"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="录制计划模板名称" prop="recordplanname">
        <el-input
          v-model="queryParams.recordplanname"
          placeholder="请输入录制计划模板名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="设备的ipv4地址" prop="ipv4address">
        <el-input
          v-model="queryParams.ipv4address"
          placeholder="请输入设备的ipv4地址"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="设备的ipv6地址" prop="ipv6address">
        <el-input
          v-model="queryParams.ipv6address"
          placeholder="请输入设备的ipv6地址"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="设备是否有云台控制" prop="hasptz">
        <el-input
          v-model="queryParams.hasptz"
          placeholder="请输入设备是否有云台控制"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="GB28181设备的SipDevice.DeviceId" prop="deviceid">
        <el-input
          v-model="queryParams.deviceid"
          placeholder="请输入GB28181设备的SipDevice.DeviceId"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="GB28181设备的SipChannel.DeviceId" prop="channelid">
        <el-input
          v-model="queryParams.channelid"
          placeholder="请输入GB28181设备的SipChannel.DeviceId"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="Rtp设备是否使用Tcp推流" prop="rtpwithtcp">
        <el-input
          v-model="queryParams.rtpwithtcp"
          placeholder="请输入Rtp设备是否使用Tcp推流"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="非Rtp设备的视频流源地址" prop="videosrcurl">
        <el-input
          v-model="queryParams.videosrcurl"
          placeholder="请输入非Rtp设备的视频流源地址"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="Rtp设备是否使用流媒体默认rtp端口，如10000端口" prop="defaultrtpport">
        <el-input
          v-model="queryParams.defaultrtpport"
          placeholder="请输入Rtp设备是否使用流媒体默认rtp端口，如10000端口"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="创建时间" prop="createtime">
        <el-date-picker clearable size="small"
          v-model="queryParams.createtime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择创建时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="更新时间" prop="updatetime">
        <el-date-picker clearable size="small"
          v-model="queryParams.updatetime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择更新时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="是否启用" prop="enabled">
        <el-input
          v-model="queryParams.enabled"
          placeholder="请输入是否启用"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="无人观察时断开流端口，此字段为true时AutoVideo字段必须为Flase如果AutoVideo为true,则此字段无效" prop="noplayerbreak">
        <el-input
          v-model="queryParams.noplayerbreak"
          placeholder="请输入无人观察时断开流端口，此字段为true时AutoVideo字段必须为Flase如果AutoVideo为true,则此字段无效"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="ffmpeg的模板名称，可指定这个流使用哪个ffmpeg模板进行拉流留空时，采用默认配置进行拉流" prop="ffmpegtemplate">
        <el-input
          v-model="queryParams.ffmpegtemplate"
          placeholder="请输入ffmpeg的模板名称，可指定这个流使用哪个ffmpeg模板进行拉流留空时，采用默认配置进行拉流"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="是否为可分享通道？如果为true,则此通道可以被推往其他服务器" prop="issharechannel">
        <el-input
          v-model="queryParams.issharechannel"
          placeholder="请输入是否为可分享通道？如果为true,则此通道可以被推往其他服务器"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="分享通道地址如果IsShareChannel为true,而ShareUrl为空，则表示此通道可以分享给GB28181服务器如果IsShareChannel为true,而ShareUrl不为空，则表示此通道可以分享线GB28181服务器的同时还可以分享给其他流媒体服务器" prop="shareurl">
        <el-input
          v-model="queryParams.shareurl"
          placeholder="请输入分享通道地址如果IsShareChannel为true,而ShareUrl为空，则表示此通道可以分享给GB28181服务器如果IsShareChannel为true,而ShareUrl不为空，则表示此通道可以分享线GB28181服务器的同时还可以分享给其他流媒体服务器"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="共享通道时此通道的唯一idgb28181时可以是deviceid其他服务时可以按照其他服务的规则来确定此id" prop="sharedeviceid">
        <el-input
          v-model="queryParams.sharedeviceid"
          placeholder="请输入共享通道时此通道的唯一idgb28181时可以是deviceid其他服务时可以按照其他服务的规则来确定此id"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['business:video_channels:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['business:video_channels:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['business:video_channels:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          :loading="exportLoading"
          @click="handleExport"
          v-hasPermi="['business:video_channels:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="video_channelsList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="数据库主键" align="center" prop="id" />
      <el-table-column label="设备的唯一ID" align="center" prop="mainid" />
      <el-table-column label="流媒体服务器ID" align="center" prop="mediaserverid" />
      <el-table-column label="vhost" align="center" prop="vhost" />
      <el-table-column label="app" align="center" prop="app" />
      <el-table-column label="通道名称，整个系统唯一" align="center" prop="channelname" />
      <el-table-column label="部门代码" align="center" prop="departmentid" />
      <el-table-column label="部门名称" align="center" prop="departmentname" />
      <el-table-column label="上级部门代码" align="center" prop="pdepartmentid" />
      <el-table-column label="上级部门名称" align="center" prop="pdepartmentname" />
      <el-table-column label="设备的网络类型" align="center" prop="devicenetworktype" />
      <el-table-column label="设备的流类型" align="center" prop="devicestreamtype" />
      <el-table-column label="使用哪种方式拉取非rtp设备的流" align="center" prop="methodbygetstream" />
      <el-table-column label="设备类型，IPC,NVR,DVR" align="center" prop="videodevicetype" />
      <el-table-column label="是否自动启用推拉流" align="center" prop="autovideo" />
      <el-table-column label="是否自动启用录制计划" align="center" prop="autorecord" />
      <el-table-column label="录制时长" align="center" prop="recordsecs" />
      <el-table-column label="录制计划模板名称" align="center" prop="recordplanname" />
      <el-table-column label="设备的ipv4地址" align="center" prop="ipv4address" />
      <el-table-column label="设备的ipv6地址" align="center" prop="ipv6address" />
      <el-table-column label="设备是否有云台控制" align="center" prop="hasptz" />
      <el-table-column label="GB28181设备的SipDevice.DeviceId" align="center" prop="deviceid" />
      <el-table-column label="GB28181设备的SipChannel.DeviceId" align="center" prop="channelid" />
      <el-table-column label="Rtp设备是否使用Tcp推流" align="center" prop="rtpwithtcp" />
      <el-table-column label="非Rtp设备的视频流源地址" align="center" prop="videosrcurl" />
      <el-table-column label="Rtp设备是否使用流媒体默认rtp端口，如10000端口" align="center" prop="defaultrtpport" />
      <el-table-column label="创建时间" align="center" prop="createtime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createtime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="更新时间" align="center" prop="updatetime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.updatetime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="是否启用" align="center" prop="enabled" />
      <el-table-column label="无人观察时断开流端口，此字段为true时AutoVideo字段必须为Flase如果AutoVideo为true,则此字段无效" align="center" prop="noplayerbreak" />
      <el-table-column label="ffmpeg的模板名称，可指定这个流使用哪个ffmpeg模板进行拉流留空时，采用默认配置进行拉流" align="center" prop="ffmpegtemplate" />
      <el-table-column label="是否为可分享通道？如果为true,则此通道可以被推往其他服务器" align="center" prop="issharechannel" />
      <el-table-column label="分享通道地址如果IsShareChannel为true,而ShareUrl为空，则表示此通道可以分享给GB28181服务器 如果IsShareChannel为true,而ShareUrl不为空，则表示此通道可以分享线GB28181服务器的同时还可以分享给其他流媒体服务器" align="center" prop="shareurl" />
      <el-table-column label="共享通道时此通道的唯一idgb28181时可以是deviceid其他服务时可以按照其他服务的规则来确定此id" align="center" prop="sharedeviceid" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['business:video_channels:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['business:video_channels:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改摄像头通道实例对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="设备的唯一ID" prop="mainid">
          <el-input v-model="form.mainid" placeholder="请输入设备的唯一ID" />
        </el-form-item>
        <el-form-item label="流媒体服务器ID" prop="mediaserverid">
          <el-input v-model="form.mediaserverid" placeholder="请输入流媒体服务器ID" />
        </el-form-item>
        <el-form-item label="vhost" prop="vhost">
          <el-input v-model="form.vhost" placeholder="请输入vhost" />
        </el-form-item>
        <el-form-item label="app" prop="app">
          <el-input v-model="form.app" placeholder="请输入app" />
        </el-form-item>
        <el-form-item label="通道名称，整个系统唯一" prop="channelname">
          <el-input v-model="form.channelname" placeholder="请输入通道名称，整个系统唯一" />
        </el-form-item>
        <el-form-item label="部门代码" prop="departmentid">
          <el-input v-model="form.departmentid" placeholder="请输入部门代码" />
        </el-form-item>
        <el-form-item label="部门名称" prop="departmentname">
          <el-input v-model="form.departmentname" placeholder="请输入部门名称" />
        </el-form-item>
        <el-form-item label="上级部门代码" prop="pdepartmentid">
          <el-input v-model="form.pdepartmentid" placeholder="请输入上级部门代码" />
        </el-form-item>
        <el-form-item label="上级部门名称" prop="pdepartmentname">
          <el-input v-model="form.pdepartmentname" placeholder="请输入上级部门名称" />
        </el-form-item>
        <el-form-item label="设备的网络类型" prop="devicenetworktype">
          <el-select v-model="form.devicenetworktype" placeholder="请选择设备的网络类型">
            <el-option label="请选择字典生成" value="" />
          </el-select>
        </el-form-item>
        <el-form-item label="设备的流类型" prop="devicestreamtype">
          <el-select v-model="form.devicestreamtype" placeholder="请选择设备的流类型">
            <el-option label="请选择字典生成" value="" />
          </el-select>
        </el-form-item>
        <el-form-item label="使用哪种方式拉取非rtp设备的流" prop="methodbygetstream">
          <el-input v-model="form.methodbygetstream" placeholder="请输入使用哪种方式拉取非rtp设备的流" />
        </el-form-item>
        <el-form-item label="设备类型，IPC,NVR,DVR" prop="videodevicetype">
          <el-select v-model="form.videodevicetype" placeholder="请选择设备类型，IPC,NVR,DVR">
            <el-option label="请选择字典生成" value="" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否自动启用推拉流" prop="autovideo">
          <el-input v-model="form.autovideo" placeholder="请输入是否自动启用推拉流" />
        </el-form-item>
        <el-form-item label="是否自动启用录制计划" prop="autorecord">
          <el-input v-model="form.autorecord" placeholder="请输入是否自动启用录制计划" />
        </el-form-item>
        <el-form-item label="录制时长" prop="recordsecs">
          <el-input v-model="form.recordsecs" placeholder="请输入录制时长" />
        </el-form-item>
        <el-form-item label="录制计划模板名称" prop="recordplanname">
          <el-input v-model="form.recordplanname" placeholder="请输入录制计划模板名称" />
        </el-form-item>
        <el-form-item label="设备的ipv4地址" prop="ipv4address">
          <el-input v-model="form.ipv4address" placeholder="请输入设备的ipv4地址" />
        </el-form-item>
        <el-form-item label="设备的ipv6地址" prop="ipv6address">
          <el-input v-model="form.ipv6address" placeholder="请输入设备的ipv6地址" />
        </el-form-item>
        <el-form-item label="设备是否有云台控制" prop="hasptz">
          <el-input v-model="form.hasptz" placeholder="请输入设备是否有云台控制" />
        </el-form-item>
        <el-form-item label="GB28181设备的SipDevice.DeviceId" prop="deviceid">
          <el-input v-model="form.deviceid" placeholder="请输入GB28181设备的SipDevice.DeviceId" />
        </el-form-item>
        <el-form-item label="GB28181设备的SipChannel.DeviceId" prop="channelid">
          <el-input v-model="form.channelid" placeholder="请输入GB28181设备的SipChannel.DeviceId" />
        </el-form-item>
        <el-form-item label="Rtp设备是否使用Tcp推流" prop="rtpwithtcp">
          <el-input v-model="form.rtpwithtcp" placeholder="请输入Rtp设备是否使用Tcp推流" />
        </el-form-item>
        <el-form-item label="非Rtp设备的视频流源地址" prop="videosrcurl">
          <el-input v-model="form.videosrcurl" placeholder="请输入非Rtp设备的视频流源地址" />
        </el-form-item>
        <el-form-item label="Rtp设备是否使用流媒体默认rtp端口，如10000端口" prop="defaultrtpport">
          <el-input v-model="form.defaultrtpport" placeholder="请输入Rtp设备是否使用流媒体默认rtp端口，如10000端口" />
        </el-form-item>
        <el-form-item label="是否启用" prop="enabled">
          <el-input v-model="form.enabled" placeholder="请输入是否启用" />
        </el-form-item>
        <el-form-item label="无人观察时断开流端口，此字段为true时AutoVideo字段必须为Flase如果AutoVideo为true,则此字段无效" prop="noplayerbreak">
          <el-input v-model="form.noplayerbreak" placeholder="请输入无人观察时断开流端口，此字段为true时AutoVideo字段必须为Flase如果AutoVideo为true,则此字段无效" />
        </el-form-item>
        <el-form-item label="ffmpeg的模板名称，可指定这个流使用哪个ffmpeg模板进行拉流留空时，采用默认配置进行拉流" prop="ffmpegtemplate">
          <el-input v-model="form.ffmpegtemplate" placeholder="请输入ffmpeg的模板名称，可指定这个流使用哪个ffmpeg模板进行拉流留空时，采用默认配置进行拉流" />
        </el-form-item>
        <el-form-item label="是否为可分享通道？如果为true,则此通道可以被推往其他服务器" prop="issharechannel">
          <el-input v-model="form.issharechannel" placeholder="请输入是否为可分享通道？如果为true,则此通道可以被推往其他服务器" />
        </el-form-item>
        <el-form-item label="分享通道地址如果IsShareChannel为true,而ShareUrl为空，则表示此通道可以分享给GB28181服务器如果IsShareChannel为true,而ShareUrl不为空，则表示此通道可以分享线GB28181服务器的同时还可以分享给其他流媒体服务器" prop="shareurl">
          <el-input v-model="form.shareurl" placeholder="请输入分享通道地址如果IsShareChannel为true,而ShareUrl为空，则表示此通道可以分享给GB28181服务器如果IsShareChannel为true,而ShareUrl不为空，则表示此通道可以分享线GB28181服务器的同时还可以分享给其他流媒体服务器" />
        </el-form-item>
        <el-form-item label="共享通道时此通道的唯一idgb28181时可以是deviceid其他服务时可以按照其他服务的规则来确定此id" prop="sharedeviceid">
          <el-input v-model="form.sharedeviceid" placeholder="请输入共享通道时此通道的唯一idgb28181时可以是deviceid其他服务时可以按照其他服务的规则来确定此id" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listVideo_channels, getVideo_channels, delVideo_channels, addVideo_channels, updateVideo_channels, exportVideo_channels } from "@/api/business/video_channels";

export default {
  name: "Video_channels",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 摄像头通道实例表格数据
      video_channelsList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        mainid: null,
        mediaserverid: null,
        vhost: null,
        app: null,
        channelname: null,
        departmentid: null,
        departmentname: null,
        pdepartmentid: null,
        pdepartmentname: null,
        devicenetworktype: null,
        devicestreamtype: null,
        methodbygetstream: null,
        videodevicetype: null,
        autovideo: null,
        autorecord: null,
        recordsecs: null,
        recordplanname: null,
        ipv4address: null,
        ipv6address: null,
        hasptz: null,
        deviceid: null,
        channelid: null,
        rtpwithtcp: null,
        videosrcurl: null,
        defaultrtpport: null,
        createtime: null,
        updatetime: null,
        enabled: null,
        noplayerbreak: null,
        ffmpegtemplate: null,
        issharechannel: null,
        shareurl: null,
        sharedeviceid: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        mainid: [
          { required: true, message: "设备的唯一ID不能为空", trigger: "blur" }
        ],
        mediaserverid: [
          { required: true, message: "流媒体服务器ID不能为空", trigger: "blur" }
        ],
        vhost: [
          { required: true, message: "vhost不能为空", trigger: "blur" }
        ],
        app: [
          { required: true, message: "app不能为空", trigger: "blur" }
        ],
        autovideo: [
          { required: true, message: "是否自动启用推拉流不能为空", trigger: "blur" }
        ],
        autorecord: [
          { required: true, message: "是否自动启用录制计划不能为空", trigger: "blur" }
        ],
        hasptz: [
          { required: true, message: "设备是否有云台控制不能为空", trigger: "blur" }
        ],
        createtime: [
          { required: true, message: "创建时间不能为空", trigger: "blur" }
        ],
        updatetime: [
          { required: true, message: "更新时间不能为空", trigger: "blur" }
        ],
        issharechannel: [
          { required: true, message: "是否为可分享通道？如果为true,则此通道可以被推往其他服务器不能为空", trigger: "blur" }
        ],
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询摄像头通道实例列表 */
    getList() {
      this.loading = true;
      listVideo_channels(this.queryParams).then(response => {
        this.video_channelsList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        mainid: null,
        mediaserverid: null,
        vhost: null,
        app: null,
        channelname: null,
        departmentid: null,
        departmentname: null,
        pdepartmentid: null,
        pdepartmentname: null,
        devicenetworktype: null,
        devicestreamtype: null,
        methodbygetstream: null,
        videodevicetype: null,
        autovideo: null,
        autorecord: null,
        recordsecs: null,
        recordplanname: null,
        ipv4address: null,
        ipv6address: null,
        hasptz: null,
        deviceid: null,
        channelid: null,
        rtpwithtcp: null,
        videosrcurl: null,
        defaultrtpport: null,
        createtime: null,
        updatetime: null,
        enabled: null,
        noplayerbreak: null,
        ffmpegtemplate: null,
        issharechannel: null,
        shareurl: null,
        sharedeviceid: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加摄像头通道实例";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getVideo_channels(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改摄像头通道实例";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateVideo_channels(this.form).then(response => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addVideo_channels(this.form).then(response => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm('是否确认删除摄像头通道实例编号为"' + ids + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delVideo_channels(ids);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有摄像头通道实例数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.exportLoading = true;
          return exportVideo_channels(queryParams);
        }).then(response => {
          this.download(response.msg);
          this.exportLoading = false;
        }).catch(() => {});
    }
  }
};
</script>
